<template>
  <div class="homePage page">
    <Banner></Banner>
    <div class="content1 content">
      <ul>
        <li v-for="(item, index) in tabList" :key="index">
          <router-link :to="{ path: item.path }">
            <img :src="item.icon" />
            <h3>{{ item.title }}</h3>
            <div class="line" :style="{ background: item.lineColor }"></div>
            <p>{{ item.desc }}</p>
          </router-link>
        </li>
      </ul>
    </div>

    <div class="content2 content">
      <div class="content_title">热门作品</div>
      <div class="list">
        <profile-card
          v-for="(item, index) in hotList"
          :key="index"
          :itemInfo="item"
          @click="$router.push({name:'gallery'})"
        ></profile-card>
      </div>
    </div>

    <div class="content3 content">
      <div class="content_title">热门作品版权交易展示</div>
      <div class="tableConatiner">
        <trade-table></trade-table>
        <el-pagination background layout="prev, pager, next" :total="10">
        </el-pagination>
      </div>
    </div>

    <div class="content4 content">
      <div class="content_title">数据安全服务</div>
      <ul class="list">
        <li v-for="(item, index) in serviceList" :key="index">
          <div class="top">
            <img :src="item.img" alt="" srcset="" />
          </div>
          <div class="bottom">
            <p>{{ item.desc }}</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import Banner from "../common/banner.vue";
import profileCard from "../profilelist/item.vue";
import tradeTable from "./tradeTable.vue";
import {ScriptWritingListByWhere,IndexScriptWritingListByWhere} from "../../api/ScriptWriting";

export default {
  components: {
    profileCard,
    tradeTable,
    Banner,
  },
  data() {
    return {
      tabList: [
        {
          icon: require("@/assets/img/icon_1.png"),
          title: "作品展示",
          desc: "优秀作品欣赏全集",
          lineColor: "#83BCFC",
          path: "/gallery",
        },
        {
          icon: require("@/assets/img/icon_2.png"),
          title: "版权交易",
          desc: "平台专业保障",
          lineColor: "#34D4D9",
          path: "/banquan",
        },
        {
          icon: require("@/assets/img/icon_3.png"),
          title: "我要创作",
          desc: "才思泉涌的灵感发泄一下吗？",
          lineColor: "#98E3BC",
          path: "/creat",
        },
      ],
      hotList: [
        {
          bg: require("@/assets/img/profile_1.png"),
          id: 1,
          isActivated: true,
          title: "123456",
          description: "作评描述",
          publisherId: 1,
          publisher: "test",
          createTime: "2021-11-02 17:32:26",
          hashCode: null,
          creationTypeId: 1,
          creationTypeName: "短视频",
          scanType: 1,
          workState: 0,
          price: 125.25,
          isCollection: 1,
          collectionNum: 1,
          isSupported: 0,
          supportNum: 0,
          classifyNames: "体育,娱乐",
          classifyIds: "19,18",
        },
        {
          bg: require("@/assets/img/profile_1.png"),
          id: 2,
          isActivated: true,
          title: "123456",
          description: "作评描述",
          publisherId: 1,
          publisher: "test",
          createTime: "2021-11-02 17:32:26",
          hashCode: null,
          creationTypeId: 1,
          creationTypeName: "短视频",
          scanType: 1,
          workState: 0,
          price: 125.25,
          isCollection: 1,
          collectionNum: 1,
          isSupported: 0,
          supportNum: 0,
          classifyNames: "体育,娱乐",
          classifyIds: "19,18",
        },
        {
          bg: require("@/assets/img/profile_1.png"),
          id: 3,
          isActivated: true,
          title: "123456",
          description: "作评描述",
          publisherId: 1,
          publisher: "test",
          createTime: "2021-11-02 17:32:26",
          hashCode: null,
          creationTypeId: 1,
          creationTypeName: "短视频",
          scanType: 1,
          workState: 0,
          price: 125.25,
          isCollection: 1,
          collectionNum: 1,
          isSupported: 0,
          supportNum: 0,
          classifyNames: "体育,娱乐",
          classifyIds: "19,18",
        },
        {
          bg: require("@/assets/img/profile_1.png"),
          id: 4,
          isActivated: true,
          title: "123456",
          description: "作评描述",
          publisherId: 1,
          publisher: "test",
          createTime: "2021-11-02 17:32:26",
          hashCode: null,
          creationTypeId: 1,
          creationTypeName: "短视频",
          scanType: 1,
          workState: 0,
          price: 125.25,
          isCollection: 1,
          collectionNum: 1,
          isSupported: 0,
          supportNum: 0,
          classifyNames: "体育,娱乐",
          classifyIds: "19,18",
        },
        {
          bg: require("@/assets/img/profile_1.png"),
          id: 5,
          isActivated: true,
          title: "123456",
          description: "作评描述",
          publisherId: 1,
          publisher: "test",
          createTime: "2021-11-02 17:32:26",
          hashCode: null,
          creationTypeId: 1,
          creationTypeName: "短视频",
          scanType: 1,
          workState: 0,
          price: 125.25,
          isCollection: 1,
          collectionNum: 1,
          isSupported: 0,
          supportNum: 0,
          classifyNames: "体育,娱乐",
          classifyIds: "19,18",
        },
      ],
      serviceList: [
        {
          img: require("@/assets/img/index_p1.png"),
          // desc: "一键发布征稿需求，超多编剧帮您策划创作，可以 快速获得大量优质创意灵感。",
          desc:"区块链存证方式保证每一份原创内容的安全性"
        },
        {
          img: require("@/assets/img/index_p2.png"),
          desc: "增加作品交易的流通性，让每一份原创作品在全网都能够流通售卖",
        },
        {
          img: require("@/assets/img/index_p3.png"),
          desc: "全网范围内对原创内容进行7*24小时全天候监测，确保原创作品的著作安全",
        },
      ],
    };
  },
  created(){
    this.getHotList()
  },
  methods:{
    getHotList(){
      IndexScriptWritingListByWhere({creationTypeId:1}).then(res=>{
          this.hotList=res.data.slice(0,4)
          console.log('热门列表',this.hotList)
      })
    }
  }
};
</script>
<style lang="scss" scoped>
.homePage{
  padding-bottom: 30px;
}
.content_title {
  width: 100%;
  height: 70px;
  line-height: 70px;
  text-align: center;
  background: #2eb0c6;
  font-size: 22px;
  font-weight: bold;
  color: #020202;
  margin-bottom: 20px;
  margin-top: 20px;
}
.content1 {
  margin: 20px 0 35px;
  ul {
    display: flex;
    li {
      display: flex;
      flex-direction: column;
      align-items: center;
      flex: 1;
      margin-right: 20px;
      padding: 40px 0;
      background: #fff;
      cursor: pointer;
      &:last-child {
        margin-right: 0;
      }
      img {
        margin-bottom: 17px;
      }
      h3 {
        font-size: 16px;
        color: #020202;
        margin-bottom: 10px;
      }
      .line {
        width: 20px;
        height: 3px;
        margin-bottom: 20px;
      }
      p {
        font-size: 12px;
        font-weight: bold;
        color: #999999;
      }
    }
  }
}
.content2 {
  .list {
    display: flex;
    flex-wrap: wrap;
    margin-top: 22px;
    .profileCard {
      width: calc((100% - 60px) / 4);
      margin-right: 20px;
      margin-bottom: 20px;
      &:nth-child(4n) {
        margin-right: 0;
      }
    }
  }
}
.content3 {
  .tableConatiner {
    padding: 0 15px 30px;
    background: #fff;
    border-radius: 4px;
  }
  .el-pagination {
    margin-top: 25px;
    text-align: center;
  }
}
.content4 {
  margin-top: 40px;
  .list {
    display: flex;
    justify-content: space-between;
    li {
      width: 320px;
      background: #ffffff;
      box-shadow: 0px 0px 21px 0px rgba(17, 16, 16, 0.07);
      border-radius: 4px;
      .top {
        height: 120px;
        width: 100%;
      }
      .bottom {
        margin: 34px 15px ;
        color: #7a7a7a;
        font-size: 12px;
      }
    }
  }
}
</style>
